import React, { useState } from 'react'

import {
  Route,
  Switch,
  Redirect
} from 'react-router-dom'

import './index.css'

import Movies from './home/Movies'
import Profile from './home/Profile'
import Theaters from './home/Theaters'
import Page404 from './Page404'
import Recursive from './examples/Recursive'

import MyLink from './navlink/MyLink'

export default function Index() {
  let [routes] = useState([
    {
      id: '001',
      title: '电影',
      path: '/movies'
    },
    {
      id: '002',
      title: '影院',
      path: '/theaters'
    },
    {
      id: '003',
      title: '我的',
      path: '/profile'
    }
  ])

  return (
    <div className="index-wrapper">
      <main>
        <Switch>
          <Route path="/movies">
            <Movies></Movies>
          </Route>
          {/* 动态路由解决多个路径共享一个组件 */}
          <Route path="/theaters/:id">
            <Theaters></Theaters>
          </Route>
          <Route path="/profile">
            <Profile></Profile>
          </Route>
          <Route path="/recursive">
            <Recursive></Recursive>
          </Route>
          <Redirect exact from="/theaters" to="/theaters/100"></Redirect>
          <Redirect exact from="/" to="/movies"></Redirect>
          <Route path="*">
            <Page404></Page404>
          </Route>
        </Switch>
      </main>
      <ul>
        {
          routes.map(route => {
            return (
              <MyLink
                key={route.id}
                route={route}
                tag="li"
              >
              </MyLink>
            )
          })
        }
      </ul>
    </div>
  )
}
